<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>教师信息管理</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #teacherTable {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        #teacherTable th, #teacherTable td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }

        .btn {
            padding: 6px 12px;
            cursor: pointer;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
        }

        #addTeacherBtn {
            background-color: #4CAF50;
            color: white;
        }

        #editBtn, #deleteBtn {
            background-color: #B0BEC5;
            color: white;
            cursor: not-allowed;
        }

        #editBtn.active, #deleteBtn.active {
            cursor: pointer;
            background-color: #FF5722;
        }

        #modalBackdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 999;
        }

        #editModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            width: 400px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
        }

        #editModal h3 {
            margin-bottom: 20px;
            text-align: center;
        }

        #editModal input {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .modal-buttons {
            text-align: center;
            margin-top: 20px;
        }

        .modal-buttons button {
            margin: 0 10px;
        }

        .selected {
            background-color: #e3f2fd;
        }
    </style>
</head>
<body>

<h2>教师信息管理系统</h2>
<button id="addTeacherBtn" class="btn">添加教师</button>
<button id="editBtn" class="btn" disabled>编辑</button>
<button id="deleteBtn" class="btn" disabled>删除</button>

<table id="teacherTable">
    <thead>
    <tr>
        <th><input type="checkbox" id="selectAll" /> 选择</th>
        <th>工号</th>
        <th>姓名</th>
        <th>部门</th>
        <th>邮箱</th>
        <th>电话</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<!-- 编辑模态框 -->
<div id="modalBackdrop"></div>
<div id="editModal">
    <h3>编辑教师信息</h3>
    <input type="hidden" id="editId" />
    <input type="text" id="editName" placeholder="姓名" />
    <input type="text" id="editDept" placeholder="部门" />
    <input type="email" id="editEmail" placeholder="邮箱" />
    <input type="text" id="editPhone" placeholder="电话" />
    <div class="modal-buttons">
        <button class="btn save-btn" id="saveEdit">保存</button>
        <button class="btn cancel-btn" id="cancelEdit">取消</button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let selectedRow = null; // 当前选中的行

    function loadTeachers() {
        $.ajax({
            url: '/api/teacher/list',
            method: 'GET',
            success: function (data) {
                const tbody = $("#teacherTable tbody");
                tbody.empty();
                data.forEach(teacher => {
                    const row = `
                        <tr data-id="${teacher.teacherNo}">
                            <td><input type="checkbox" class="selectRow" /></td>
                            <td>${teacher.teacherNo}</td>
                            <td>${teacher.name}</td>
                            <td>${teacher.department}</td>
                            <td>${teacher.email}</td>
                            <td>${teacher.phone}</td>
                        </tr>
                    `;
                    tbody.append(row);
                });
            },
            error: function () {
                alert("加载教师数据失败！");
            }
        });
    }

    loadTeachers();

    // 全选/取消全选
    $(document).on("change", "#selectAll", function () {
        const checked = $(this).prop("checked");
        $(".selectRow").prop("checked", checked);
        toggleButtons();
    });

    // 单选/取消选中
    $(document).on("change", ".selectRow", function () {
        toggleButtons();
    });

    // 切换按钮的可用状态
    function toggleButtons() {
        const selectedRows = $(".selectRow:checked");
        if (selectedRows.length === 1) {
            selectedRow = selectedRows.closest("tr");
            $("#editBtn, #deleteBtn").addClass("active").removeAttr("disabled");
        } else {
            selectedRow = null;
            $("#editBtn, #deleteBtn").removeClass("active").attr("disabled", "disabled");
        }
    }

    // 编辑按钮点击事件
    $(document).on("click", "#editBtn", function () {
        if (!selectedRow) return;

        const row = selectedRow;
        $("#editId").val(row.data("id"));
        $("#editName").val(row.find("td").eq(1).text());
        $("#editDept").val(row.find("td").eq(2).text());
        $("#editEmail").val(row.find("td").eq(3).text());
        $("#editPhone").val(row.find("td").eq(4).text());

        $("#modalBackdrop").fadeIn(200);
        $("#editModal").fadeIn(200);
    });

    // 保存编辑
    $("#saveEdit").on("click", function () {
        const id = $("#editId").val();
        const updatedTeacher = {
            teacherNo: id,
            name: $("#editName").val().trim(),
            department: $("#editDept").val().trim(),
            email: $("#editEmail").val().trim(),
            phone: $("#editPhone").val().trim()
        };

        $.ajax({
            url: `/api/teacher/edit/${id}`,
            type: "PUT",
            contentType: "application/json",
            data: JSON.stringify(updatedTeacher),
            success: function (res) {
                alert(res || "编辑成功！");
                $("#editModal").fadeOut(200);
                $("#modalBackdrop").fadeOut(200);
                loadTeachers();
            },
            error: function () {
                alert("编辑失败！");
            }
        });
    });

    // 取消编辑
    $("#cancelEdit").on("click", function () {
        $("#editModal").fadeOut(200);
        $("#modalBackdrop").fadeOut(200);
    });

    // 删除按钮点击事件
    $(document).on("click", "#deleteBtn", function () {
        if (!selectedRow) return;
        const id = selectedRow.data("id");

        if (!confirm("确定要删除这位教师吗？")) return;

        $.ajax({
            url: `/api/teacher/delete/${id}`,
            type: "DELETE",
            success: function (res) {
                alert(res || "删除成功！");
                loadTeachers();
            },
            error: function () {
                alert("删除失败！");
            }
        });
    });
</script>

</body>
</html>
